<template>
  <v-container fluid>
    <v-flex xs12>
      <v-card>
        <v-card-title>
          会员列表
          <v-spacer></v-spacer>
              <v-btn floating small light class="blue-grey" @click.native.stop="rightDrawer = !rightDrawer">
                          <v-icon light>search</v-icon>
                        </v-btn>
                        &nbsp;
               <v-btn floating small class="purple" @click.native="add">
                <v-icon light>add</v-icon>
              </v-btn>
              &nbsp;

                <v-btn floating small class="grey" @click.native="print">
                <v-icon light>print</v-icon>
              </v-btn>
        </v-card-title>
        <v-data-table v-bind:headers="headers" v-bind:items="items" v-bind:search="search" v-bind:pagination.sync="pagination" hide-actions
          class="elevation-1">

          <template slot="items" scope="props" class="body-2">
            <td class="text-xs-left">{{ props.item.card_no }}</td>
            <td class="text-xs-left">{{ props.item.name }}</td>
            <td class="text-xs-right">{{ props.item.gender }}</td>
            <td class="text-xs-right">{{ props.item.age }}</td>
            <td class="text-xs-right">{{ props.item.phone }}</td>
            <td class="text-xs-right">{{ props.item.point_avail }}</td>
            <td class="text-xs-right">{{ props.item.remark }}</td>
            <td class="text-xs-right">
              <v-btn floating small class="indigo" @click.native.stop="dialog = !dialog">
                <v-icon light>info</v-icon>
              </v-btn>
              <v-btn floating small class="teal" @click.native="edit(props.item)">
               <v-icon light>edit</v-icon>
              </v-btn>
              <v-btn floating small class="cyan" @click.native="remove(props.item)">
                <v-icon light>delete</v-icon>
              </v-btn>
            </td>
          </template>
        </v-data-table>
        <div class="text-xs-center pt-2">
          <v-pagination v-model="pagination.page" :length="Math.ceil(pagination.totalItems / pagination.rowsPerPage)"></v-pagination>
        </div>
      </v-card>
      <v-dialog v-model="dialog">
        <v-card>
          <v-card-title>
            Dialog
          </v-card-title>
          <v-card-text>
            <v-btn color="primary">Open Dialog 3</v-btn>
          </v-card-text>
        </v-card>
      </v-dialog>
    </v-flex>

     <v-navigation-drawer temporary :right="right" v-model="rightDrawer">
          <v-list>
            <v-list-item>
              <v-list-tile-title>&nbsp;</v-list-tile-title>
            </v-list-item>
            <v-list-item>
              <v-list-tile>
                <v-list-tile-title>Search Panel</v-list-tile-title>
                <v-list-tile-action>
                  <v-btn @click.native="searchCustomers">
                    <v-icon dark>search</v-icon>
                  </v-btn>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-item>
            <v-list-item>
              <v-list-tile-title>&nbsp;</v-list-tile-title>
            </v-list-item>
            <v-list-item>
              <v-layout row>
                <v-flex xs11 offset-xs1>
                  <v-text-field name="input-1-3" label="Last Name" light v-model="searchVm.contains.lastName"></v-text-field>
                </v-flex>
              </v-layout>
            </v-list-item>
            <v-list-item>
              <v-layout row>
                <v-flex xs11 offset-xs1>
                  <v-text-field name="input-1-3" label="Last Name" light v-model="searchVm.contains.lastName"></v-text-field>
                </v-flex>
              </v-layout>
            </v-list-item>
            <v-list-item>
              <v-layout row>
              <v-flex xs11 offset-xs1>
                  <v-subheader light class="text-sm-central">Age range between Age 1 and Age 2 </v-subheader>
              </v-flex>
              </v-layout>
                <v-layout row>
                <v-flex xs8 offset-xs1>
                  <v-slider label="Age 1" light v-bind:max="50" v-model="searchVm.between.age.former"></v-slider>
                </v-flex>
                <v-flex xs3>
                  <v-text-field light v-model="searchVm.between.age.former" type="number"></v-text-field>
                </v-flex>
              </v-layout>
               <v-layout row>
                <v-flex xs8 offset-xs1>
                  <v-slider label="Age 2" light v-bind:max="100" v-model="searchVm.between.age.latter"></v-slider>
                </v-flex>
                <v-flex xs3>
                  <v-text-field light v-model="searchVm.between.age.latter" type="number"></v-text-field>
                </v-flex>
              </v-layout>
            </v-list-item>
            <v-list-item>
              <v-list-tile>
                <v-list-tile-title></v-list-tile-title>
                <v-list-tile-action>
                  <v-btn @click.native="clearSearchFilters">
                    <v-icon dark>clear</v-icon>
                  </v-btn>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-item>
          </v-list>
        </v-navigation-drawer>
        <v-snackbar :timeout="2500" :top="true" :error="true" :multi-line="true" v-model="snackbar">
                  {{ errText }}
            <v-btn flat light @click.native="snackbar = false">Close</v-btn>
        </v-snackbar>
  </v-container>
</template>
<script>
export default {
  data: function () {
    return {
      dialog: false,
      rightDrawer: false,
      right: true,
      search: '',
      errText: '',
      pagination: {},
      snackbar: false,
      headers: [
        {
          text: '卡号',
          left: true,
          sortable: false,
          value: 'card_no'
        },
        { text: '姓名', value: 'name' },
        { text: '性别', value: 'gender' },
        { text: '年龄', value: 'age' },
        { text: '手机号', value: 'phone' },
        { text: '可用积分', value: 'point_avail' },
        { text: '备注', value: 'remark' },
        { text: '', value: '' }
      ],
      items: [],
      searchVm: {
        contains: {
          firstName: '',
          lastName: ''
        },
        between: {
          age: {former: 0, latter: 0}
        }
      }
    }
  },
  methods: {
    print () {
      window.print()
    },
    edit (item) {
      this.$router.push({name: 'Customer', params: { id: item.id }})
    },
    add () {
      this.$router.push('NewCustomer')
    },
    remove (item) {

      this.$parent.openDialog('Do you want to delete this item?', '', () => {
        this.api.deleteData('customers/' + item.id.toString()).then((res) => {
          this.getCustomers()
        }, (err) => {
          console.log(err)
          this.snackbar = true
          this.errText = 'Status has not be deleted successfully. Please try again.'
        })
      })
    },
    changeStatus (item) {
      item.isActive = !item.isActive
      this.api.putData('customers/' + item.id.toString(), item).then((res) => {
        // this.$router.push('Customers')
      }, (err) => {
        console.log(err)
        this.snackbar = true
        this.errText = 'Status has not be updated successfully. Please try again.'
        item.isActive = !item.isActive
      })
    },
    searchCustomers () {
      this.rightDrawer = !this.rightDrawer
      this.appUtil.buildSearchFilters(this.searchVm)
      let query = this.appUtil.buildJsonServerQuery(this.searchVm)

      this.api.getData('customers?' + query).then((res) => {

        this.items = res.data
        this.items.forEach((item) => {
          if (item.orders && item.orders.length) {
            item.orderRecord = item.orders.length
          } else {
            item.orderRecord = 0
          }
        })
      }, (err) => {
        console.log(err)
      })
    },
    clearSearchFilters () {

      this.rightDrawer = !this.rightDrawer
      this.appUtil.clearSearchFilters(this.searchVm)

      this.api.getData('customers').then((res) => {
        this.items = res.data
        this.items.forEach((item) => {
          if (item.orders && item.orders.length) {
            item.orderRecord = item.orders.length
          } else {
            item.orderRecord = 0
          }
        })
        console.log(this.items)
      }, (err) => {
        console.log(err)
      })
    },
    getCustomers () {
      this.api.getData('customers').then((res) => {
        this.items = res.data
        console.log('res is', res)
//        this.items.forEach((item) => {
//          // item.avatar = '/assets/' + item.avatar
//          if (item.orders && item.orders.length) {
//            item.orderRecord = item.orders.length
//          } else {
//            item.orderRecord = 0
//          }
//        })
      }, (err) => {
        console.log(err)
      })
    }
  },
  computed: {
  },
  mounted: function () {
    this.getCustomers()
  }
}
</script>
